﻿@page "/color-picker/api"

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons
@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates customization of the ColorPicker component by using its properties from the property pane. Select any combination of properties from the property pane to customize the ColorPicker component.</p>
</SampleDescription>
<ActionDescription>
   <p>In this sample, <code>ColorPicker</code> is rendered with default configuration.</p>
   <p>This sample can be customized further with the combination of ColorPicker properties from the property pane. For example,</p>
      <ul><li>Control (apply/cancel) buttons can be enabled or disabled using <b>Show Buttons</b> checkbox from the property pane.</li>
           <li>You can select the color by entering the color value in the property pane <b>Value</b> textbox.</li>
           <li>You can switch to "Picker" and "Palette" modes by clicking and selecting the <b>Mode</b> from select mode dropdownlist.</li>
           <li>you can enable or disable the ColorPicker using <b>Disabled</b> checkbox from property pane.</li>
           <li>you can enable or disable the mode switcher using <b>Mode Switcher</b> checkbox from property pane.</li>
       </ul>
    <p>More information about Blazor ColorPicker component can be found in this <a target="_blank" href="https://blazor.syncfusion.com/documentation/color-picker/getting-started/">documentation</a> section. </p>
</ActionDescription>

<div class="col-lg-8 control-section">
    <div id="colorpicker-control">
        <h4>Choose a color</h4>
        <SfColorPicker @bind-Value="@inputValue" Mode="@mode" ModeSwitcher="@modeSwitch" ShowButtons="@showbuttons" Disabled="@disable"></SfColorPicker>
    </div>
</div>
<div class="col-lg-4 property-section">
    <table id="property" title="Properties" style="width: 100%">
        <tbody>
            <tr>
                <td style="width: 50%">
                    <div>Value</div>
                </td>
                <td style="width: 50%">
                    <div style="max-width: 200px">
                        <SfTextBox ID="firstname" @bind-Value="@inputValue"></SfTextBox>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;padding-top:10px">
                    <div>Mode</div>
                </td>
                <td style="width: 50%;padding-top:10px">
                    <div style="max-width: 200px">
                        <SfDropDownList DataSource="@data" @bind-Value="@ddlMode" PopupHeight="200px" TValue="string" TItem="string">
                            <DropDownListEvents ValueChange="@valueChanged" TValue="string" TItem="string"></DropDownListEvents>
                        </SfDropDownList>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;padding-top:15px">
                    <div>@disableContent</div>
                </td>
                <td style="width: 50%;padding-top:15px">
                    <SfCheckBox @bind-Checked="disable" TChecked="bool"></SfCheckBox>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;padding-top:15px">
                    <div>Show Buttons</div>
                </td>
                <td style="width: 50%;padding-top:15px">
                    <SfCheckBox @bind-Checked="showbuttons" TChecked="bool"></SfCheckBox>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;padding-top:15px">
                    <div>Mode Switcher</div>
                </td>
                <td style="width: 50%;padding-top:15px">
                    <SfCheckBox @bind-Checked="modeSwitch" TChecked="bool"></SfCheckBox>
                </td>
            </tr>
        </tbody>
    </table>
</div>

@code {
    private bool disable;
    private bool modeSwitch = true;
    private bool showbuttons = true;
    private string inputValue = "#0db1e7";
    private ColorPickerMode mode = ColorPickerMode.Picker;
    private string ddlMode = "Picker";
    private string disableContent => disable ? "Enable" : "Disable";
    private void valueChanged(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, string> args)
    {
        mode = args.Value == "Picker" ? ColorPickerMode.Picker : ColorPickerMode.Palette;
    }
    private string[] data = new string[] { "Picker", "Palette" };
}

<style>
    .property-panel-content {
        padding: 0 10px 10px 0;
        overflow: auto;
    }
    #colorpicker-control {
        margin: 30px auto;
        padding-top: 50px;
        text-align: center;
    }
    #colorpicker-control h4 {
        margin-bottom: 20px;
    }
    .mobile #colorpicker-control h4 {
        font-size: 20px;
    }
</style>